<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: fzh
  Date: 2017/9/17
  Time: 12:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<% String basePath = request.getContextPath(); %>
<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <meta charset="UTF-8">
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            font-size: 14px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            /*display: flex;*/
            width: 100%;
            /*justify-content: center;*/
        }

        .table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 1px;
        }

        .table * {
            box-sizing: border-box;
        }

        .table > caption {
            font-size: 1.2em;
            padding-top: 5px;
            padding-bottom: 5px;
            color: #0E2431;
            font-weight: bolder;
        }

        .table > thead > tr {
            width: auto;
            color: white;
            background-color: #0E2431;
        }

        .table > thead > tr > th {
            padding: 4px 10px;
        }

        .table > thead > tr > th:first-child {
            border-top-left-radius: 3px;
        }

        .table > thead > tr > th:last-child {
            border-top-right-radius: 3px;
        }

        .table > tbody > tr:nth-child(2n) {
            background-color: #EEEEEE;
        }

        .table > tbody > tr:nth-child(2n+1) {
            background-color: #F9F9F9;
        }

        .table > tbody > tr:last-child td:first-child {
            border-bottom-left-radius: 3px;
        }

        .table > tbody > tr:last-child td:last-child {
            border-bottom-right-radius: 3px;
        }

        .table > tbody {
            font-size: 0.8em;
            text-align: center;
        }

        .table > tbody > tr td {
            padding-bottom: 4px;
            padding-top: 4px;
        }

        .pagination {
            width: 100%;
            margin-top: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .pagination ul {
            display: flex;
            justify-content: space-around;
            list-style: none;
            padding: 0;
        }

        .pagination li {
            display: inline-block;
            padding: 0 8px;
            font-size: 0.8em;
            width: auto;
        }

        .pagination li:first-child {
        }

        .pagination li a {
            color: deeppink;
            text-decoration: none;
        }

        .pagination li a:hover {
            color: red;
            text-decoration: underline;
        }

        .invalid {
            color: #999 !important;
        }

        .invalid:hover {
            cursor: not-allowed;
            text-decoration: none !important;
        }
    </style>
</head>
<body>
<div class="container">
    <table class="table">
        <caption>全部指南</caption>
        <thead>
        <tr>
            <th>编号</th>
            <th>标题</th>
            <th>面向对象</th>
            <th>是否在线办公</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${requestScope.result}" var="guide">
            <tr>
                <td>${guide.guideCode}</td>
                <td>${guide.title}</td>
                <td><c:choose>
                    <c:when test="${guide.obj == 0}">
                        <c:out value="个人"/>
                    </c:when>
                    <c:when test="${guide.obj == 1}">
                        <c:out value="企业"/>
                    </c:when>
                    <c:otherwise>
                        <c:out value="个人和企业"/>
                    </c:otherwise>
                </c:choose></td>
                <td>${guide.online == 1? "是" : "否"}</td>
                <td><fmt:formatDate value="${guide.createTime}" pattern="yyyy-MM-dd hh:mm:ss"/></td>
                <td><a href="">查看详情</a>&nbsp;|&nbsp;<a href="">编辑</a>&nbsp;|&nbsp;<a href="">删除</a></td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
    <c:if test="${requestScope.page.totalCount > requestScope.page.everyPage}">
        <div class="pagination">
            <ul>
                <li>共 ${requestScope.page.totalCount} 条</li>
                <li>
                    <c:choose>
                        <c:when test="${(requestScope.page.currentPage - 4) <= 0}">
                            <a class="invalid">上一页</a>
                        </c:when>
                        <c:otherwise>
                            <a href="#">上一页</a>
                        </c:otherwise>
                    </c:choose>
                </li>
                <c:if test="${(requestScope.page.currentPage - 4) > 0}">
                    <li>...</li>
                </c:if>
                <c:if test="${(requestScope.page.currentPage - 3) > 0}">
                    <li><a href="#">${requestScope.page.currentPage - 3}</a></li>
                </c:if>
                <c:if test="${(requestScope.page.currentPage - 2) > 0}">
                    <li><a href="#">${requestScope.page.currentPage - 2}</a></li>
                </c:if>
                <c:if test="${(requestScope.page.currentPage - 1) > 0}">
                    <li><a href="#">${requestScope.page.currentPage - 1}</a></li>
                </c:if>
                <a href="#">${requestScope.page.currentPage}</a>
                <c:if test="${(requestScope.page.currentPage + 1) < requestScope.page.totalPage}">
                    <li><a href="#">${requestScope.page.currentPage + 1}</a></li>
                </c:if>
                <c:if test="${(requestScope.page.currentPage + 2) < requestScope.page.totalPage}">
                    <li><a href="#">${requestScope.page.currentPage + 2}</a></li>
                </c:if>
                <c:if test="${(requestScope.page.currentPage + 3) < requestScope.page.totalPage}">
                    <li><a href="#">${requestScope.page.currentPage + 3}</a></li>
                </c:if>
                <c:if test="${(requestScope.page.currentPage + 4) < requestScope.page.totalPage}">
                    <li>...</li>
                </c:if>
                <li>
                    <c:choose>
                        <c:when test="${(requestScope.page.currentPage + 4) < requestScope.page.totalPage}">
                            <a href="#">下一页</a>
                        </c:when>
                        <c:otherwise>
                            <a class="invalid">下一页</a>
                        </c:otherwise>
                    </c:choose>
                </li>
            </ul>
        </div>
    </c:if>
</div>
</body>
</html>
